﻿<FluentInputFile Id="my-file-uploader"
                 Mode="InputFileMode.SaveToTemporaryFolder"
                 Multiple="true"
                 MaximumFileCount="4"
                 MaximumFileSize="@(10*1024*1024)"
                 Accept="image/*"
                 @bind-ProgressPercent="@ProgressPercent"
                 OnCompleted="@OnCompletedAsync"
                 Style="height: 300px; border: 1px dashed var(--accent-fill-rest);">
    <ChildContent>
        <label for="my-file-uploader">
            <FluentIcon Value="@(new @Icons.Regular.Size24.ArrowUpload())" />
        </label>

        <div>
            Drag files here you wish to upload,
            or <label for="my-file-uploader">browse</label>
            for them<span style="color: red;">*</span>.
            <br />
            <em>Maximum of 4 files allowed.</em>
        </div>

        <div>
            <br />
            <a href="#">Read more about our supported file formats.</a>
        </div>
    </ChildContent>
</FluentInputFile>

@if (Files.Any())
{
    <h4>File(s) uploaded:</h4>
    <ul>
        @foreach (var file in Files)
        {
            <li>
                <b>@file.Name</b> 🔹
                @($"{Decimal.Divide(file.Size, 1024):N} KB") 🔹
                @file.ContentType 🔹
                @file.LocalFile?.FullName
                @file.ErrorMessage
            </li>
        }
    </ul>
}

@code
{
    int ProgressPercent = 0;
    FluentInputFileEventArgs[] Files = Array.Empty<FluentInputFileEventArgs>();

    private async Task OnCompletedAsync(IEnumerable<FluentInputFileEventArgs> files)
    {
        Files = files.ToArray();

        // For the demo, delete these files.
        foreach (var file in Files)
        {
            file.LocalFile?.Delete();
        }

        // Wait 3 seconds before to reset the progress bar.
        await Task.Delay(3000);
        ProgressPercent = 0;
    }
}
